<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<style type="text/css">

		.wrapper:hover
    	{ 
        background-color:pink;
   		 }
   		 

		.wrapper{
			width: 400px;
			min-height: 250px;
			border: 1px solid gray;
			margin: 0 auto;
		}

		.header h3{
			height: 45px;
			line-height: 45px;
			background-color: #0096BF;
			text-align: center;
			color: #fff;
			margin:0;
		}



		.item button{
			background-color: #0096BF;
			color: #fff;
			height: 35px;
			margin:10px;
			line-height: 35px;
			margin-top: 15px;
			border: none;
			border-radius: 5px;
		}

	</style>
</head>
<body>
	<div class="wrapper">
	
		<div class="header">
			<h3><span class="iconfont icon-fanhuitubiao" style="float:left;margin-left:30px;font-size:20px;"></span>请选择省份</h3>
		</div>

		<div class="area-wrapper">
			<!--省-->
			<div class="province item">
				<button>广西壮族自治区</button>
				<button>广东省</button>
				<button>湖南省</button>
				<button>湖北省</button> 
				<button>安徽省</button>
				<button>河南省</button>
				<button>江苏省</button>
			</div>

			<!--市-->
			<div class="city item" style="display:none;position:absolute; margin-left:400px;width:300px; height:200px; border:1px solid pink; top:53px;">
				<button>柳州市</button>
				<button>广州市</button>
				<button>长沙市</button>
				<button>武汉市</button>
				<button>合肥市</button>
				<button>郑州市</button>
				<button>南京市</button>
			</div>
 
			<!--区-->
			<div class="area item" style="position:absolute; margin-left:700px;width:300px; height:200px; border:1px solid pink; display:none; top:153px;">
				<button>鱼峰区</button>
				<button>青秀区</button>
				<button>钦北区</button>
				<button>柳南区</button>
				<button>城中区</button>
				<button>黄埔区</button>
				<button>顺德区</button>
			</div>
		</div>
	</div>

<script type="text/javascript" src=js/jquery3.js></script>
<script type="text/javascript">

$('.icon-fanhuitubiao').click(function(){
	var cflag = $('.city').css('display');

	var aflag = $('.area').css('display');

	if(cflag=='block' && aflag=='block' ){
		$('.area').hide();
	}

	if(cflag=='block' && aflag=='none' ){
		$('.city').hide(); 
	}



	console.log('city 的显/隐状态'+cflag);

});


function compselect(){
	$('.city').hide();
	$('.area').hide();
}



	/**初始化省份div框
	1.先把省份div框中的静态数据除掉
	**/

	function showarea(btn){
		// 获取区按钮的value值---id
		var cid=$(btn).val();
		// console.log("省份id==="+pid);

		// 隐藏provin，city这两个div，同时展示area面板内容
		$('.province').show();
		$('.area').show();
		$('.city').show();

		// 获取所有区信息并过滤
		$.get('data/area.json',function(res){
			// 过滤区的数据
			var his=[];
			for(var i=0;i<res.length;i++){

				if(cid==res[i].pid){
					his.push(res[i]);
				}
			}

			// 将城市下面的城市显示到.area div下面
			$('.area').empty();
			for(var i=0;i<his.length;i++){
				var btn= '<button onclick="compselect()" value="'+his[i].id+'">'+his[i].name+'</button>';
				$('.area').append(btn);
			}
		})

	}


	function showcity(btn){
		// 获取省份按钮的value值---id
		var pid=$(btn).val();
		// console.log("省份id==="+pid);

		// 隐藏provin，area这两个div，同时展示city面板内容
		$('.province').show();
		$('.area').hide();
		$('.city').show();

		// 获取所有城市信息并过滤
		$.get('data/city.json',function(res){
			// 过滤城市的数据
			var tmp=[];
			for(var i=0;i<res.length;i++){

				if(pid==res[i].pid){
					tmp.push(res[i]);
				}
			}

			// 将省份下面的城市显示到.city div下面
			$('.city').empty();
			for(var i=0;i<tmp.length;i++){
				var btn= '<button onclick="showarea(this)" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';
				$('.city').append(btn);
			}
		})

	}


	function InitProvince(){
		$('.province').empty();
		$.get('data/province.json',function(res){
			for(var i=0;i<res.length;i++){
				/**用字符串拼接一个button**/
				var btn='';
				btn = '<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>'
				$('.province').append(btn);
			}
		});
	}


	InitProvince();



</script>


</body>
</html>